<!DOCTYPE html>
<html lang='en'>

<head>
    <meta charset='UTF-8'>
    <meta name='viewport' content='width=device-width, initial-scale=1.0'>
    <meta http-equiv='X-UA-Compatible' content='ie=edge'>
    <title>Document</title>
</head>

<body>
    <div id='app'>
        <router-link to="/music">音乐</router-link>
        <router-link to="/youku">优酷</router-link>
        <router-link to="/movie">电影</router-link>
        <router-link to="/novel">小说</router-link>
        <router-view></router-view>
    </div>
    <!-- 引入顺序不能颠倒 -->
    <script src='https://cdn.jsdelivr.net/npm/vue@2.6.10/dist/vue.js'></script>
    <script src="../js/vue-router.js"></script>
    <script>
        // 创建组件
        const music = {
            template: `<div>
                <p>音乐列表</p>
                <router-link to="/music/qqmusic">QQ音乐</router-link>
                <router-link to="/music/kgmusic">酷狗音乐</router-link>
                <router-link to="/music/wyymusic">网易云音乐</router-link>
                <router-view></router-view>
                </div>`
        }
        const youku = {
            template: `<div>优酷列表</div>`
        }
        const movie = {
            template: `<div>电影列表</div>`
        }
        const novel = {
            template: `<div>小说列表</div>`
        }
        // 二级组件
        const qqmusic = {
            template: '<div>QQ音乐列表</div>'
        }
        const kgmusic = {
            template: '<div>酷狗音乐列表</div>'
        }
        const wyymusic = {
            template: '<div>网易云音乐列表</div>'
        }

        // 创建路由规则,是一个数组
        const resoult = [
            // 路由重定向,如果打开的页面是空白 url是 /, 默认指定跳转某个地址
            {
                path: '/',
                redirect: "/youku"
            },
            // path是路径  表示的是路由地址
            {
                path: "/music",
                component: music,
                children: [{
                    path: '/music/qqmusic',
                    component: qqmusic
                }, {
                    path: '/music/kgmusic',
                    component: kgmusic
                }, {
                    path: '/music/wyymusic',
                    component: wyymusic
                }, ]
            }, {
                path: "/youku",
                component: youku
            }, {
                path: "/movie",
                component: movie
            }, {
                path: "/novel",
                component: novel
            },
        ]

        // 创建路由实例并挂载规则
        const router = new VueRouter({
            routes: resoult
        })

        const vm = new Vue({
            el: '#app',
            data: {},
            methods: {},
            // 将路由实例 挂载给vue实例
            router
        })
    </script>
</body>

</html>